<script lang="ts" setup>
import { reactive, ref, onMounted } from "vue";
// import CreateInfo from "./components/CreateInfo.vue";
import { getProductPage, delProduct } from "/@/api/productInfo";
// import { getFile } from "/@/api/common";
import dayjs from "dayjs";
import { ElMessage, ElMessageBox } from "element-plus";
import { loadEnv } from "@build/index";
const { VITE_PROXY_DOMAIN_REAL } = loadEnv();
import timezone from "dayjs/plugin/timezone";
import utc from "dayjs/plugin/utc";
dayjs.extend(utc);
dayjs.extend(timezone);

defineOptions({
  name: "ProductInfoIndex"
});

const dialogVisible = ref<boolean>(false);
const tableData = ref([]);
const query = reactive({ currentPage: 1, pageSize: 15 });
const total = ref(0);
const formData = ref({});
const type = ref("");
const createInfoRef = ref();

onMounted(() => {
  getTableData();
});

const getTableData = () => {
  getProductPage(query).then((res: any) => {
    tableData.value = res.data.data;
    total.value = res.data.total;
    tableData.value.forEach(async item => {
      // item.imgUrl = await getUrl(item.picture);
      item.imgUrl =
        VITE_PROXY_DOMAIN_REAL + "/v1/get_file?path=" + encodeURI(item.picture);
    });
  });
};

const handleSizeChange = val => {
  query.pageSize = val;
  getTableData();
};

const handleCurrentChange = val => {
  query.currentPage = val;
  getTableData();
};

const submitSuccess = () => {
  getTableData();
};

// const getUrl = async val => {
//   if (!val) return;
//   return getFile({ path: encodeURI(val) });
// };

const createHandle = () => {
  formData.value = {
    name: "", // 产品名称
    quantity: null, //数量
    sku: "", //sku
    weight: null, //重量
    length: null, //箱长
    width: null, //箱宽
    height: null, //箱高
    picture: "" //产品图片
  };
  dialogVisible.value = true;
  type.value = "创建";
};

const editHandle = val => {
  const obj = { ...val };
  obj.quantity = Number(obj.quantity);
  obj.weight = Number(obj.weight);
  obj.length = Number(obj.length);
  obj.width = Number(obj.width);
  obj.height = Number(obj.height);
  formData.value = obj;
  dialogVisible.value = true;
  type.value = "编辑";
  createInfoRef.value.setImgUrl(obj.imgUrl);
};

const deleteRow = id => {
  ElMessageBox.confirm("是否确认删除", "Warning", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning"
  })
    .then(() => {
      delProduct({ id }).then(() => {
        ElMessage({
          type: "success",
          message: "删除成功"
        });
        getTableData();
      });
    })
    .catch(() => {});
};
</script>

<template>
  <div class="product-info-warp">
    <el-card>
      <el-button type="primary" @click="createHandle">创建产品信息</el-button>
      <el-table
        :data="tableData"
        stripe
        border
        style="width: 100%; margin-top: 20px"
      >
        <el-table-column prop="identifier" label="产品编号" />
        <el-table-column prop="name" label="产品名称" />
        <el-table-column prop="quantity" label="数量" />
        <el-table-column prop="sku" label="sku" />
        <el-table-column prop="weight" label="重量" />
        <el-table-column prop="length" label="长" />
        <el-table-column prop="width" label="宽" />
        <el-table-column prop="height" label="高" />
        <el-table-column label="产品图片">
          <template #default="{ row }">
            <el-image v-if="row.imgUrl" :src="row.imgUrl" fit="cover" />
          </template>
        </el-table-column>
        <el-table-column label="创建时间(加利福尼亚)">
          <template #default="{ row }">
            {{
              row.created_at
                ? dayjs(row.created_at * 1000)
                    .tz("America/Los_Angeles")
                    .format("YYYY-MM-DD HH-mm-ss")
                : ""
            }}
          </template>
        </el-table-column>
        <el-table-column label="更新时间(加利福尼亚)">
          <template #default="{ row }">
            {{
              row.updated_at
                ? dayjs(row.updated_at * 1000)
                    .tz("America/Los_Angeles")
                    .format("YYYY-MM-DD HH-mm-ss")
                : ""
            }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="140">
          <template #default="{ row }">
            <el-button type="primary" size="small" @click="editHandle(row)"
              >编辑</el-button
            >
            <el-button size="small" @click="deleteRow(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div style="display: flex; justify-content: flex-end; margin-top: 10px">
        <el-pagination
          v-model:currentPage="query.currentPage"
          v-model:page-size="query.pageSize"
          :page-sizes="[5, 10, 15, 20, 30]"
          background
          layout="total, sizes, prev, pager, next, jumper"
          :total="Number(total)"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>

    <create-info
      ref="createInfoRef"
      v-model="dialogVisible"
      :form-data="formData"
      :type="type"
      @submit-success="submitSuccess"
    />
  </div>
</template>
